<template>
	<view class="page" :style="{'padding-top':mt+'px'}">
		<c-nav-bar :title="titleHeader" ></c-nav-bar>
		<view class="bg">

		</view>
		<view class="contain">
			<view class="top" >
				<view class="left">
					<span class="blue"></span>
					<span></span>
					<span class="red"></span>
				</view>
				<view class="middle" @tap="chooseSpot">
					<view>{{beginSpot.name}}
						<span v-if="!beginSpot.name" style='color: #AAAAAA;'>请选择出发地 </span>
					</view>
					<view>{{arriveSpot.name}}
						<span v-if="!arriveSpot.name" style='color: #AAAAAA;'>请选择目的地 </span>
					</view>
				</view>

				<view class="right" @click="exChange()">
				</view>
			</view>
			
			<view class="bottom">
				<!-- <u-button type="primary" size="large" shape="circle" color="#007A69"
					@click="getPlanningRoute()">dianji</u-button> -->
				<u-button type="primary" size="large" shape="circle" color="#007A69"
					@click="routeSubmit()">路线查询</u-button>
			</view>
		</view>
		<view class="tabbar" v-if="tabBar&&arriveSpot.name&&beginSpot.name">
			<!-- <view class="tabbar"> -->
			<view class="tab">
				<span @click='tabChoose(1)' :class="currentTab==1?'tabChoose':''">路线推荐</span>
				<span @click='tabChoose(2)' :class="currentTab==2?'tabChoose':''">导航路线</span>
			</view>
			<view class="tabContain" v-if="currentTab==1">
				<view class="item" v-for="(item,index) in programme" :key="index">
					<view class="top">
						<span class="title">
							方案{{index+1}}
						</span>
						<span @click="goToBuyShipTicket()">购买7日内往返船票＞</span>
					</view>
					<view class="row">
						<view class="inside" v-for="(i,idx) in item" :key="idx">
							<view class="name">
								<span class="circle"></span>
								<span>{{i.name}}</span>
							</view>
							<view class="nodeTop">
								<view class="node" v-if="idx!==item.length-1" :style="{width:computWidth(item)}">
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="middle">
						<span v-for="(c,idx1) in item" :key="c.id" class="suit">
							<span class="circle"></span>
							<span class="node" v-if="idx1!==item.length-1" :style="{width:computWidth(item)}">
							</span>
						</span>
					</view>
					<view class="bottom">
						<view class="inside" v-for="(i,idx) in item" :key="idx">
							<span>{{i.name}}</span>
						</view>
					</view> -->
				</view>
			</view>
			<view class="tabContain" v-if="currentTab==2">
				<view class="map">
					<map class="map" id="map" :markers='markers' :longitude='longitude' :latitude='latitude'
						:polygons="polygons" :show-location="true" :scale='8'></map>
				</view>
			</view>
		</view>
		<!-- 选择起始点弹窗 -->
		<u-popup :show="show" @close="close()" @open="open">
			<view class="main">
				<view class="title">
					<text>选择起止地点</text>
					<text @click="close()" style="font-size: 24px;">×</text>
				</view>
				<u-line></u-line>
				<view class="title1">
					出发地点
				</view>

				<view class="begin" @click="chooseBegin(index)" :class="currentBegin==index?'choose':''"
					v-for="(item,index) in beginOptions" :key="index">
					<span>{{item.name}}

					</span>
					<image v-if="currentBegin==index" class="img"
						src="https://i.ringzle.com/file/20231117/2dafc8cdced147bc896cb7c1e26cf7d4.png" mode="aspectFit">
					</image>
				</view>
				<view class="title1">
					到达地点
				</view>
				<view style="margin-bottom: 20rpx;" class="begin" :class="currentArrive==index?'choose':''"
					@click="chooseArrive(index)" v-for="(item,index) in beginOptions" :key="Date.now()+index">
					<span>{{item.name}}</span>
					<image v-if="currentArrive==index" class="img"
						src="https://i.ringzle.com/file/20231117/2dafc8cdced147bc896cb7c1e26cf7d4.png" mode="aspectFit">
					</image>
				</view>
				<u-button size="large" type="primary" shape="circle" @click="handleSpot()">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import amapFile from "@/utils/amap-wx.130.js";
	export default {
		data() {
			return {
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				// h:uni.getSystemInfoSync().windowHeight - 87,
				titleHeader:'出行规划',
				markers: [{
						id: 1,
						longitude: '',
						latitude: '',
						iconPath: "https://i.ringzle.com/file/20231120/a0774539324143edaa206acdbe32023f.png",
						width: 30,
						height: 34
					},
					{
						id: 2,
						longitude: '',
						latitude: '',
						iconPath: "https://i.ringzle.com/file/20231120/d9fb3a7dacf84da4a281c328c1d92775.png",
						width: 30,
						height: 34
					}
				],
				latitude: null,
				longitude: null,
				textData: {},
				tabBar: false,
				show: false,
				beginOptions: [],
				formData: {},
				currentBegin: 0,
				currentArrive: 0,
				arriveSpot: {
					name: ''
				},
				beginSpot: {
					name: ''
				},
				currentTab: 0,
				programme: [],
				routShow: false,
				latitude: '',
				longitude: '',
				polygons: [{ // 路线
					strokeWidth: 5,
					strokeColor: '#67c23a',
					// fillColor: '#1791fc66',
					dottedLine: false,
					arrowLine: true,
					level: "abovelabels",
					// 必须要有三个默认属性，并且值不能完全一致，不然报错
					points: []
				}],
				exChangeFlag: true,
				station: {}
			}
		},
		onLoad: function() {
			this.getAllSpot()

		},
		onReady() {

		},
		computed: {

		},
		methods: {
			exChange() {
				this.exChangeFlag = !this.exChangeFlag
				this.station = this.beginSpot
				this.beginSpot = this.arriveSpot
				this.arriveSpot = this.station
				console.log(this.arriveSpot.name, this.beginSpot.name, '111111');
			},
			goToBuyShipTicket() {
				uni.reLaunch({
					url: '/pagesIndex/steamerTicket/index'
				})
			},
			computWidth(item) {
				const numbers = item.length
				console.log(numbers, 'numbersnumbers');
				if (numbers > 5) {
					return (1 / numbers) * 80 + 'rpx'
				} else if (numbers < 4) {
					return (1 / numbers) * 300 + 'rpx'
				} else {
					return (1 / numbers) * 200 + 'rpx'
				}
			},
			getAllSpot() {
				this.$api.post('/api/tripspot/selectAll').then(({
					data: res
				}) => {
					if (res.msg == 'success') {
						this.beginOptions = res.data
					}
				})
			},
			chooseSpot(event) {
				this.show = true
			},
			close() {
				this.show = false
			},
			open() {

			},
			chooseBegin(index) {
				this.currentBegin = index
				if (this.currentBegin && this.currentArrive) {
					this.handleSpot()
				} else {
					return
				}
			},
			chooseArrive(index) {
				this.currentArrive = index
				if (this.currentBegin && this.currentArrive) {
					this.handleSpot()
				} else {
					return
				}
			},
			handleSpot() {
				this.beginOptions.forEach((item, index) => {
					if (index == this.currentBegin) {
						this.beginSpot = item

					}
				})
				this.beginOptions.forEach((item, index) => {
					if (index == this.currentArrive) {
						this.arriveSpot = item

					}
				})
				this.show = false
			},
			routeSubmit() {
				console.log(this.arriveSpot.name, this.beginSpot.name, '22222');
				if (this.arriveSpot.id && this.beginSpot.id) {
					this.$api.post('/api/tripspot/selectTripStrategyList', {
						endSpot: {
							...this.arriveSpot
						},
						startSpot: {
							...this.beginSpot
						}
					}).then(res => {
						if (res.data.msg == 'success') {
							this.polygons[0].points = []
							this.programme = res.data.data
							if (res.data.data.length == 0) {
								uni.showToast({
									title: '该路线无推荐，请重新选择',
									icon: 'none',
								})
								this.tabBar = false
								return
							}
							this.currentTab = 1
							this.tabBar = true
							this.latitude = res.data.data[0][0].lat
							this.longitude = res.data.data[0][0].lon
							res.data.data.forEach((item, index) => {
								if (index == 0) {
									item.forEach((i, idx) => {
										this.polygons[0].points.push({
											latitude: null,
											longitude: null
										})
										this.polygons[0].points[idx].latitude = item[idx]
											.lat
										this.polygons[0].points[idx].longitude = item[idx]
											.lon
										console.log(this.polygons[0].points,
											'this.polygons[0].points');
										if (idx == 0) {
											this.markers[0].longitude = i.lon
											this.markers[0].latitude = i.lat
										}
										if (idx == item.length - 1) {
											this.markers[1].longitude = i.lon
											this.markers[1].latitude = i.lat
										}
									})
								}
							})

						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
							})
							this.tabBar = false
						}
					})

				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入起止点'
					})
				}

			},
			tabChoose(index) {
				this.currentTab = index

			}
		}
	}
</script>

<style lang="scss" scoped>
	$color-primary: #007A69;

	.custom-content-marker {
		position: relative;
		width: 25px;
		height: 34px;
	}

	.custom-content-marker img {
		width: 100%;
		height: 100%;
	}

	.custom-content-marker .close-btn {
		position: absolute;
		top: -6px;
		right: -8px;
		width: 15px;
		height: 15px;
		font-size: 12px;
		background: #ccc;
		border-radius: 50%;
		color: #fff;
		text-align: center;
		line-height: 15px;
		box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
	}

	.custom-content-marker .close-btn:hover {
		background: #666;
	}

	.page {

		height: 100vh;
		// padding-top: 120rpx;
		.contain {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 400rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			transform: translate(0, -35px);
			margin: 0px 20rpx;
			padding: 30rpx;
			box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(1, 185, 249, 0.1);

			.top {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				height: 100%;

				.left {
					display: flex;
					flex-direction: column;
					align-items: center;

					.blue {
						display: block;
						width: 15rpx;
						height: 15rpx;
						background: #188FFE;
						border-radius: 7rpx;
					}

					span:nth-child(2) {
						display: block;
						border-left: 1rpx solid #d5d5d5;
						height: 72rpx;
						border-radius: 7rpx;
						margin: 8rpx 0;
					}

					.red {
						display: block;
						width: 15rpx;
						height: 15rpx;
						background: #FF5252;
						border-radius: 7rpx;
					}
				}

				.middle {
					width: 526rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 600;

					view {
						height: fit-content;
						line-height: 50rpx;
						border-bottom: #d0d0d0 1rpx solid;
						padding: 20rpx 0;
					}

					view:nth-child(1) {}
				}

				.right {
					width: 64rpx;
					height: 64rpx;
					background: url('@/static/index/travelPlanning/wfqh.png') center repeat;
					background-size: cover;
				}
			}
		}

		.tabbar {
			.map {
				height: 100vh;
				width: 750rpx;
			}

			.tab {
				display: flex;
				justify-content: space-evenly;
				font-size: 32rpx;
			}

			.tabChoose {
				color: #007A69;
				border-bottom: #007A69 solid 4rpx;
				padding-bottom: 10rpx;

			}

			.tabContain {
				.item {
					width: 702rpx;
					height: 200rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(1, 185, 249, 0.1);
					border-radius: 24rpx;
					margin-top: 20rpx;
					padding: 25rpx 20rpx;

					.top {
						display: flex;
						justify-content: space-between;

						.title {
							font-weight: 600;
							font-size: 26rpx;
						}

						span:nth-child(2) {
							color: $color-primary;
						}
					}

					.row {
						height: 150rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.inside {
							display: flex;
							align-items: flex-start;

							.nodeTop {
								height: 24rpx;
								width: max-content;
								display: flex;
								align-items: center;

								.node {
									height: 1rpx;
									border-top: 1rpx dashed #01B9F9;
									margin: 0 20rpx;
								}
							}

							.name {
								width: max-content;
								display: flex;
								align-items: center;
								flex-direction: column;

								.circle {
									margin-bottom: 10rpx;
									width: 24rpx;
									height: 24rpx;
									border: 2rpx solid #01B9F9;
									border-radius: 22rpx;
								}

							}

						}
					}

					.middle {
						color: $color-primary;
						margin: 40rpx 0 20rpx;
						width: 100%;
						display: flex;
						justify-content: center;

						.suit {
							flex-direction: row;
							justify-content: space-evenly;
							align-items: center;
							display: inline-flex;




						}
					}


				}

			}
		}
	}

	.choose {
		background: #F3FCFF;
		border-radius: 16rpx;
		border: 2rpx solid #007A69 !important;
		color: #007A69;
	}

	.bg {
		width: 750rpx;
		height: 277rpx;
		background: url('https://i.ringzle.com/file/20231116/972335ec04db4e39be339f4e18b826b2.png') repeat-x center;
		background-size: cover;
		// background-attachment: fixed
	}



	.main {
		height: 1033rpx;
		padding: 20rpx;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		overflow-y: auto;

		.title {
			display: flex;
			flex-direction: row;
			font-size: 36rpx;
			margin-bottom: 20rpx;
			line-height: 36rpx;

			text:nth-child(1) {
				width: 700rpx;
				text-align: center;
				display: block;
				line-height: 36rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.title1 {
			font-weight: bold;
			font-size: 30rpx;
			margin: 20rpx 0;
		}

		.begin {
			width: 30%;
			height: 64rpx;
			border: 1rpx solid #CCCCCC;
			border-radius: 16rpx;
			display: inline-block;
			text-align: center;
			line-height: 64rpx;
			margin: 10rpx;
			position: relative;

			.img {
				width: 34rpx;
				height: 26rpx;
				position: absolute;
				z-index: 3;
				right: 0;
				bottom: 0;
			}
		}

	}

	.map_container {
		position: absolute;
		top: 0;
		bottom: 80px;
		left: 0;
		right: 0;
	}

	.map {
		width: 100%;
		height: 100%;
	}

	.map_text {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0px;
		height: 80px;
		background: #fff;
		padding: 0 15px;
	}

	text {
		margin: 5px 0;
		display: block;
		font-size: 12px;
	}

	.h1 {
		margin: 15px 0;
		font-size: 15px;
	}
</style>